
<template>
    <div class="avatar">
<div class="avatar-detail">
<div>
  <van-image
  class="personl-img"
  width="2rem"
  height="2rem"
  :src="icon"
  round
/>
</div>
<div class="detail">
    <div class="nickname">{{ nickname }}</div>
    <div><span>{{ create_time }}</span><span>{{ dev_type }}</span>
    <span>{{ belong_place }}</span></div>
  </div>
</div>
<div class="attention" :class="{active:isFollow}" @click="getFollow">
  <span v-if="!isFollow"> + 关注</span>
  <span v-else>已关注</span>
</div>
</div>
</template>

<script setup lang="ts">
import { findStore } from '../stores/findStore/find'
import {storeToRefs} from 'pinia';
import {ref,onMounted} from 'vue'
const props = defineProps(['nickname', 'create_time', 'dev_type', 'mid', 'belong_place', 'icon', 'id','cont']);
let isFollow = ref(false);
const followStore = findStore();
const { myFollowList } = storeToRefs(followStore);
// let curid = ref<number>();
// curid.value = props.id;
onMounted(() => {
  isFollow.value = myFollowList.value.some((item) => {
    return item.id === props.id;
  });
})

const getFollow = () => {
  // localStorage
  isFollow.value = !isFollow.value;
  if (isFollow.value) {
       myFollowList.value = myFollowList.value.filter((item) => {
        return item.id !== props.id;
      });
      myFollowList.value = [...myFollowList.value, props.cont];
      localStorage.setItem('myFollowList', JSON.stringify(myFollowList.value));
    } else {
      myFollowList.value = myFollowList.value.filter((item) => {
        return item.id !== props.id;
      });
      localStorage.setItem('myFollowList', JSON.stringify(myFollowList.value));
  }
  
}
</script>

<style lang="scss" scoped>
  .avatar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .avatar-detail {

      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .8rem;
    }

  
     .detail {
      margin-left: .8rem;
      color: #757575;
      font-size: .65rem;
      span {
        margin-right: .4rem;
      }
    }
   
    .nickname {
      color: #333;
      font-size: .8rem;
      margin-bottom: .1rem;
    }

    .attention {
      display: block;
      font-size: .75rem;
      color: #ff5934;
      padding: .35rem 1.2rem;
      border-radius: 99999rem;
      border: .05rem solid #ff5934;
      span {
      display: block;
      width: 4em;
       margin-top: .03rem;
      text-align: center;
      box-sizing: border-box;
    }
    &.active{
      background-color: #fff;
      color: #757575;
      border: .08rem solid #666666;
      box-sizing: border-box;
    }
    }
  }
</style>